<template>
  <div class="table">
    <el-table border :data="list">
      <template v-for="(item, index) in tableConfig.config">
        <el-table-column
          v-if="item.shown"
          :key="index"
          :label="item.label"
          :formatter="item.formatter"
        >
          <template slot-scope="scope">
            <el-button
              @click="Edit(scope.row, 'Edit')"
              type="text"
              size="middle"
              v-if="item.isEdit"
              >编辑</el-button
            >
            <el-button
              @click="Delete(scope.row, 'Delete')"
              type="text"
              size="middle"
              v-if="item.isDel"
              >删除</el-button
            >
            <el-button
              @click="Particulars(scope.row, 'Particulars')"
              type="text"
              size="middle"
              v-if="item.isParticulars"
              >详情</el-button
            >
            <el-button
              @click="Undercarriage(scope.row, 'Undercarriage')"
              type="text"
              size="middle"
              v-if="item.isUndercarriage"
              >下架</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
        >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "jmtTalbe",
  props: {
    list: {
      type: Array,
      default: () => {},
    },
    tableConfig: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // multipleSelection: []
    };
  },
  created() {
    console.log(this.list);
  },
  methods: {
    Edit(row, name) {
      this.$emit("Edit", row);
    },
    Delete(row, name) {
      this.$emit("Delete", row);
    },
    Particulars(row, name) {
      this.$emit("Particulars", row);
    },
    Undercarriage(row, name) {
      this.$emit("Undercarriage", row);
    },
  },
};
</script>
<style scoped>
</style>
<style>
.table .el-table tr th {
  background-color: #3ca1ff;
  color: white;
  text-align: center;
  border-color: #c1c1c1;
}
.table .el-table td {
  text-align: center;
}
.el-table__body-wrapper {
  max-height: 350px;
}
.el-table__body-wrapper:hover {
  overflow-y: auto;
}
.el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 1px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled) {
  background-color: #fff;
}
.el-pagination.is-background .btn-prev:not(.disabled) {
  background-color: #fff;
  color: black;
}
.el-pagination.is-background .btn-next:not(.disabled) {
  background-color: #fff;
  color: black;
}
</style>

